/* -----
   switch
   ----- */

.ui-switch {
  display: inline-block;
  input {
    display: none;
  }
  .switch {
    position: relative;
    height: 22px;
    width: 44px;
    display: inline-block;
    vertical-align: middle;
    padding: 2px;
    border-radius: 11px;
    background: $color-border;
    cursor: pointer;
    transition: background .3s;
  }
  .open {
    display: none;
  }
  .btn {
    height: 18px;
    width: 18px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 10px;
    background: $color-white;
    transition: left .3s;
  }
  input:checked + .switch {
    background: $color-primary;
    .btn {
      left: 24px;
    }
  }
  input:checked ~ .open {
    display: inline;
  }
  input:checked ~ .close {
    display: none;
  }
  .on {
    background: $color-primary;
    .btn {
      left: 24px;
    }
  }
}